<template>
	<view class="search">
		<!-- 搜索头部结构 -->
		<view class="box">
			<uni-search-bar @confirm="myconfirm" v-model="key" @input="serachinput" :focus="true" cancelButton="none"
				:radius="40">
			</uni-search-bar>
		</view>

		<!-- 搜索建议列表 -->
		<view class="searchList">
			<view @click="toDetail(item.goods_id)" class="item" v-for="(item, index) in searchList" :key="index">
				<view class="left">
					{{ item.goods_name }}
				</view>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history" v-if="key === '' ? true : false">
			<view class="top">
				<text>搜索历史</text>
				<uni-icons @click="clearHistory" type="trash" size="16"></uni-icons>
			</view>
			<view class="bottom">
				<view @click="toList(item)" class="item" v-for="(item, index) in historyList" :key="index">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer: null,
				searchList: [],
				key: '',
				historyList: ['apple', 'app', 'a', '小米', '大米', '红米'],
				// historyShow: true
			};
		},
		methods: {
			// 在搜索框中输入内容时，会触发这个事件
			serachinput(e) {
				// 清除定时器
				clearTimeout(this.timer)
				if (e === '') {
					this.searchList = []
					return
				}
				// 重新设置定时器

				this.timer = setTimeout(async () => {
					// 发送请求到服务器得到搜索建议列表
					const {
						data: res
					} = await uni.$http.get(`/api/public/v1/goods/search?query=${e}`)
					this.searchList = res.message.goods
				}, 300)

			},
			// 跳转到商品详情页面
			toDetail(goods_id) {
				this.key = ''
				this.searchList = []
				uni.navigateTo({
					url: `/pages/goods_detail/main?goods_id=${goods_id}`
				})
			},
			// 点击历史记录跳转到列表页面
			toList(item) {
				uni.navigateTo({
					url: `/pages/list/list?key=${item}`
				})
			},
			//点击回车跳转列表页面
			myconfirm() {
				if (this.key === '') return
				uni.navigateTo({
					url: `/pages/list/list?key=${this.key}`
				})
				this.historyList.unshift(this.key)
				this.historyList = [...new Set(this.historyList)]
				uni.setStorageSync('history', this.historyList)
			},
			// 清除历史搜索记录
			clearHistory() {
				uni.showModal({
					title: '温馨提示',
					content: '确认删除历史记录',
					success: res => {
						this.historyList = []
						uni.removeStorageSync('history')
					}
				})
			}
		},
		onShow() {
			this.key = ''
			this.searchList = []
		},
		onLoad() {
			this.historyList = uni.getStorageSync('history') || []
		}
	}
</script>

<style lang="scss">
	.search {
		.box {
			position: sticky;
			top: 0;
			left: 0;
			background-color: #c00000;
		}

		.searchList {
			font-size: 12px;

			.item {
				display: flex;
				justify-content: space-between;
				line-height: 60rpx;
				border-bottom: 1px solid #f5f5f5;
				padding: 0 20rpx;

				.left {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.history {
		.top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f0f0f0;
			padding: 0 20rpx;
			line-height: 80rpx;
		}

		.bottom {
			display: flex;
			flex-wrap: wrap;

			font-size: 12px;

			.item {
				padding: 10rpx 10rpx;
				margin: 10rpx 20rpx;
			}
		}
	}
</style>
